<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>登录页面</title>
</head>
<body>
<h2>模拟登录</h2>
<form id="loginForm">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required><br><br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required><br><br>
    <button type="submit">登录</button>
</form>

<p id="result"></p>

<script>
    const form = document.getElementById('loginForm');
    const result = document.getElementById('result');
    form.addEventListener('submit', function(event) {
      event.preventDefault(); // 防止表单默认提交行为
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      fetch('http://localhost:8080/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: username,
          password: password
        })
      })
      .then(response => response.json())
      .then(data => {
        result.innerText = `结果：${data.message} (${data.code})`;
      })
      .catch(error => {
        result.innerText = '请求失败，请检查后端服务是否启动。';
        console.error('错误:', error);
      });
    });
</script>
</body>
</html>